<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        验证码设置
      </div>
    </div>
    <div class="quyu">
      <div class="top">
        <span>验证码编辑</span>
      </div>
      <div class="set clearfix">
        <div class="set_let clearfix">
          <p class="s_t">启动验证码</p>
          <p style="margin-bottom:0" class="clearfix">验证码方向</p>
        </div>
        <div class="set_rig clearfix">
          <form>
            <el-checkbox v-model="checked">新用户注册</el-checkbox>
            <el-checkbox v-model="checked">密码重置</el-checkbox>
            <el-checkbox v-model="checked" class="houtai">后台系统登录</el-checkbox>
            <p class="ding clearfix">(启动验证码可以验证信息真实性，推荐打开验证码功能，注意：启动验证码会使得部分操作变得繁琐，建议仅在必须时打开)</p>

            <el-checkbox v-model="checked">短信验证码</el-checkbox>
          </form>
        </div>
      </div>
    </div>
    <span class="btn">提交</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  overflow-x:auto;
  margin: 0;
  margin-left: 29px;
  padding: 0;
  .dashboard-text {
    width: 100%;
  overflow-x:auto;
    margin-top: 17px;
    width: 1517px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      float: left;
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      i {
        float: left;
        margin-top: 8.5px;
        width: 11px;
        height: 20px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      float: right;
    }
  }
  // box
  .quyu {
    width: 1517px;
    height: 284px;
    margin-bottom: 28px;
    padding: 0 24px 49px 30px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    .top {
      // width: 1463px;
      height: 50px;
      margin-bottom: 9px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      span {
        float: left;
        margin: 0;
        padding: 0;
        border: none;
        text-align: left;
        display: block;
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        color: #333;
        font-size: 14px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    // set
    .set {
      padding: 23px 400px 19px 51px;
      .set_let {
        float: left;
        p {
          width: 128px;
          margin-bottom: 61px;
          height: 14px;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .s_t {
          margin-bottom: 157px;
        }
      }
      .set_rig {
        float: left;
        width: 873px;
        height: 185px;
        form {
          position: relative;
          input[type="checkbox"] {
            float: left;
            margin-right: 12px;
            width: 20px;
            height: 20px;
            background-color: #fff;
            // -webkit-appearance: none;
            border: 1px solid #666;
            border-radius: 4px;
            margin-bottom: 12px;
            // outline: none;
          }
          p {
            width: 791px;
            height: 15px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
          label {
            float: left;
            width: 829px;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            color: #333;
            margin-bottom: 12px;
          }
          #houtai {
            float: left;
            margin-bottom: 85px;
          }
          .houtai {
            float: left;
            margin-bottom: 85px;
          }
          .ding {
            position: absolute;
            top: 118px;
            left: 0;
          }
        }
      }
    }
  }
  .btn {
    margin-left: 731px;
    text-align: center;
    line-height: 40px;
    display: block;
    width: 110px;
    height: 40px;
    background: rgba(72, 141, 255, 1);
  }
}
</style>
